import React, { memo, useCallback } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import {useParams} from 'react-router-dom'
import {Pagination} from 'antd'
import { LikeOutlined } from '@ant-design/icons'

import { PlaylistCommentWrapper } from './style'
import { formatImg } from '@/utils/format'
import {
  getPlaylistCurrentCommentPageAction,
  getPlaylistCommentAction
} from '../../../../store/actionCreators'
export default memo(function PlaylistComment() {
  const {id} = useParams()
  const { commentList ,totalCommentCount} = useSelector(state => ({
    commentList: state.getIn(['playlist', 'commentList']),
    totalCommentCount: state.getIn(['playlist', 'totalCommentCount']),
  }), shallowEqual)
  const dispatch = useDispatch()
  const pageChange = useCallback((page) => {
    dispatch(getPlaylistCurrentCommentPageAction(page))
    dispatch(getPlaylistCommentAction(id))
  }, [dispatch, id])
  return (
    <PlaylistCommentWrapper>
      <div className="header">
        <span className='title'>评论</span>
        <span className='count'>共{totalCommentCount}条评论</span>
      </div>
      <div className='line'>最新评论</div>
      <div className="list">
        {
          commentList.map(item => {
            return (
              <div key={item.commentId} className='comment_item'>
                <div className="left">
                  <img src={formatImg(item.user.avatarUrl,50)} alt="" />
                </div>
                <div className="right">
                  <p><a href="da" className='nickname'>{item.user.nickname}</a>:{item.content}</p>
                  <div className="row">
                    <div className='time'>{item.timeStr}</div>
                    <div className="operation">
                    <LikeOutlined />({item.likedCount})<a href="fa" className='reply'>回复</a>
                    </div>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      <Pagination defaultCurrent={1}
                  total={totalCommentCount}
                  showSizeChanger={false}
                  pageSize={20}
                  onChange={pageChange}
                  className='pagination'/>
    </PlaylistCommentWrapper>
  )
})
